import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {

  state = {carName:'奔驰c63'}

  changeCar = ()=>{
    this.setState({carName:'迈巴赫'}) //carName:'迈巴赫'
    // const obj = this.state
    // obj.carName = '迈巴赫'
    // this.setState(obj) //地址引用不变, this.setState不生效 
    // 因为 shouldComponentUpdate 在底层做了浅比较
  }

  // shouldComponentUpdate(nextProps, nextState){
  //   // console.log(nextProps,nextState)
  //   // console.log(this.props,this.state)
  //   return !this.state.carName===nextState.carName
  // }

  render() {
    console.log('Parent--render')
    const {carName} = this.state
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <span>我的车名字是：{carName}</span>
        <button onClick={this.changeCar}>点我换车</button>
        <Child carName="奥拓"/>
      </div>
    )
  }
}

class Child extends PureComponent {

  // shouldComponentUpdate(nextProps, nextState){
  //   console.log(nextProps,nextState)
  //   console.log(this.props,this.state)
  //   return !this.props.carName===nextProps.carName
  // }

  render() {
    console.log('Child--render')
    return (
      <div className="child">
        <h3>我是Child组件</h3>
        <span>我接到的车是：{this.props.carName}</span>
      </div>
    )
  }
}
